import { Header } from "@/sections/Header";
import Link from "next/link";
import { notFound } from "next/navigation";
import { BlogContent } from "./BlogContent";
import { TableOfContents } from "./TableOfContents";
import { ReadingProgress } from "./ReadingProgress";

type BlogPost = {
  id: number;
  documentId: string;
  slug: string;
  title: string;
  description: string;
  data: string;
  category: string;
  content: string;
  createdAt: string;
  updatedAt: string;
  publishedAt: string;
};

import { getAllBlogSlugs, getBlogPost } from '@/lib/api';

export async function generateStaticParams() {
  const slugs = await getAllBlogSlugs();
  return slugs.map((slug) => ({
    slug: slug,
  }));
}



export default async function BlogPost({ params }: { params: { slug: string } }) {
  const post = await getBlogPost(params.slug);

  if (!post) {
    notFound();
  }

  return (
    <div className="min-h-screen bg-indigo-950">
      <ReadingProgress />
      <Header />
      <div className="container max-w-3xl mx-auto px-2 sm:px-4 py-3 sm:py-6 mt-24">
        <div className="grid grid-cols-1 lg:grid-cols-[1fr_200px] gap-2 sm:gap-4">
          <BlogContent post={post} />
          <aside className="fixed bottom-0 left-0 right-0 lg:static lg:block bg-indigo-950/90 backdrop-blur-md lg:backdrop-blur-none lg:bg-transparent p-2 lg:p-0 transform translate-y-full lg:translate-y-0 transition-transform duration-300 ease-in-out shadow-lg lg:shadow-none border-t border-white/10 lg:border-none" id="toc-container">
            <TableOfContents content={post.content} />
          </aside>
        </div>
      </div>
      <Link
        href="/blog"
        className="fixed bottom-6 right-6 z-20 flex items-center justify-center w-12 h-12 text-2xl text-white/80 hover:text-white bg-white/10 hover:bg-white/15 rounded-full border border-white/20 backdrop-blur-sm hover:scale-105 shadow-lg hover:shadow-white/10 transition-all duration-300"
      >
        👈
      </Link>
    </div>
  );
}